<template>
    <div class="middle-container" :style="{backgroundImage: bgImg, color: '#38E5DE'}">
        <div class="title-container">
            <div class="title">
                <img src="../../assets/img/common/title_tip.png" height="16" width="16"/>
                <div class="title-text">{{ title }}</div>
            </div>
            <img src="../../assets/img/common/close-16px.png" style="cursor: pointer" @click="closeWindow" height="16" width="16"/>
        </div>
        <div class="content-container">
            <div ref="myChart" class="echarts-map"></div>
        </div>
    </div>
</template>

<script>
import useQueryGoodsWorldMapData from "@/composables/useQueryGoodsWorldMapData";
import {onMounted, ref, watch} from "vue";
import echartsUtil from "@/commons/utils/echartsUtil";
import {useRoute} from "vue-router";

require('/src/assets/js/world');

export default {
    name: "GoodsMiddleWorldMap",

    setup() {
        let bgImg= 'url(' + require('../../assets/img/common/middle-bg.png') + ')'
        const title = '南山港外贸出口货物流向'
        const type = useRoute().params.type
        // eChart实例
        let myChartInstance;
        const myChart = ref(null);
        // 地图坐标点数据
        const pointDictionary = [
            {code: 'KRPUS', name: '釜山', point: [129.0756416, 35.1795543]},
            {code: 'KRBUS', name: '釜山', point: [129.0756416, 35.1795543]},
            {code: 'VNHPG', name: '海防', point: [106.6880841, 20.8449115]},
            {code: 'VNHPH', name: '海防', point: [106.6880841, 20.8449115]},
            {code: 'CAVCR', name: '温哥华', point: [-123.1207375, 49.2827291]},
            {code: 'CAVAN', name: '温哥华', point: [-123.1207375, 49.2827291]},
            {code: 'USVAN', name: '温哥华', point: [-122.6614861, 45.6387281]},
            {code: 'PHMAN', name: '马尼拉', point: [120.9842195, 14.5995124]},
            {code: 'THLCH', name: '林查班', point: [100.9158073, 13.1040552]},
            {code: 'THLCB', name: '林查班', point: [100.9158073, 13.1040552]},
            {code: 'PHMNL', name: '马尼拉', point: [120.9842195, 14.5995124]},
            {code: 'MYPKG', name: '巴生西港', point: [101.4086, 3.005078]},
            {code: 'MYPKE', name: '巴生港', point: [101.4086, 3.005078]},
            {code: 'MYKCT', name: '巴生北港', point: [101.4086, 3.005078]},
            {code: 'MYKLA', name: '巴生港', point: [101.4086, 3.005078]},
            {code: 'TWKAO', name: '高雄', point: [120.3014353, 22.6272784]},
            {code: 'TWKHH', name: '高雄', point: [120.3014353, 22.6272784]},
            {code: 'BRSTS', name: '桑托斯', point: [-46.3288865, -23.9678823]},
            {code: 'BRSSZ', name: '桑托斯', point: [-46.3288865, -23.9678823]},
            {code: 'VNSGN', name: '胡志明市', point: [106.6296638, 10.8230989]},
            {code: 'VNCLI', name: '胡志明卡莱', point: [106.7853922, 10.7708268]},
            {code: 'VNHCMC', name: '胡志明卡莱', point: [106.7853922, 10.7708268]},
            {code: 'IDJKT', name: '雅加达', point: [106.845599, -6.2087634]},
            {code: 'IDJAK', name: '雅加达', point: [106.845599, -6.2087634]},
            {code: 'CNSHE', name: '南山', point: [113.916509, 22.483182]},
            {code: 'HKHKG', name: '香港', point: [114.109497, 22.396428]},
            {code: 'SGSIN', name: '新加坡', point: [103.819836, 1.352083]},
            {code: 'SGSGP', name: '新加坡', point: [103.819836, 1.352083]},
            {code: 'JPTOK', name: '东京', point: [139.7319925, 35.7090259]},
            {code: 'JPTYO', name: '东京', point: [139.7319925, 35.7090259]},
            {code: 'AUSYD', name: '悉尼', point: [151.2069902, -33.8674869]},
            {code: 'AEJEA', name: '杰贝阿里', point: [55.0272904, 24.9857145]},
            {code: 'AEJAL', name: '杰贝阿里', point: [55.0272904, 24.9857145]},
            {code: 'THBKK', name: '曼谷', point: [100.5017651, 13.7563309]},
            {code: 'KRINC', name: '仁川', point: [126.7052062, 37.4562557]},
            {code: 'TRIST', name: '伊斯坦布尔', point: [28.9783589, 41.0082376]},
            {code: 'INNSA', name: '那瓦西瓦', point: [72.9511875, 18.9499361]},
            {code: 'CNJJW', name: '九江', point: [112.993517, 22.831182]},
            {code: 'CNJIU', name: '九江', point: [112.993517, 22.831182]},
            {code: 'CNHPU', name: '黄埔', point: [113.2616, 23.0549]},
            {code: 'CNHUA', name: '黄埔', point: [113.2616, 23.0549]},
            {code: 'ZADUR', name: '德班', point: [31.0218404, -29.8586804]},
            {code: 'ILASH', name: '阿什克伦', point: [34.5742523, 31.6687885]},
            {code: 'SAJED', name: '吉达', point: [39.2375507, 21.2854067]},
            {code: 'MXMAN', name: '曼萨尼约', point: [-104.3384616, 19.1138094]},
            {code: 'MXZLO', name: '曼萨尼约', point: [-104.3384616, 19.1138094]},
            {code: 'PHMANS', name: '马尼拉南港', point: [120.9842195, 14.5995124]},
            {code: 'PHMNS', name: '马尼拉南港', point: [120.9842195, 14.5995124]},
            {code: 'PHMNN', name: '马尼拉北港', point: [120.9842195, 14.5995124]},
            {code: 'MYPTP', name: '丹戎帕拉帕斯', point: [103.552088, 1.363721]},
            {code: 'MYTPP', name: '丹戎帕拉帕斯', point: [103.552088, 1.363721]},
            {code: 'INPIP', name: '皮帕瓦沃', point: [71.5341894, 21.0120728]},
            {code: 'INPAV', name: '皮帕瓦沃', point: [71.5341894, 21.0120728]},
            {code: 'TRTEK', name: '泰基尔达', point: [27.511674, 40.9780919]},
            {code: 'CNQIN', name: '青岛', point: [120.382609, 36.067108]},
            {code: 'CNTAO', name: '青岛', point: [120.382609, 36.067108]},
            {code: 'CNSSG', name: '三水', point: [112.896607, 23.156046]},
            {code: 'CNSJQ', name: '三水', point: [112.896607, 23.156046]},
            {code: 'CNSTO', name: '汕头', point: [116.681972, 23.354091]},
            {code: 'CNSWA', name: '汕头', point: [116.681972, 23.354091]},
            {code: 'CNBJG', name: '顺德北滘', point: [113.207187, 22.928305]},
            {code: 'CNBJO', name: '顺德北滘', point: [113.207187, 22.928305]},
            {code: 'CNNSA', name: '南沙', point: [113.525165, 22.801624]},
            {code: 'CNNAS', name: '南沙', point: [113.525165, 22.801624]},
            {code: 'CNGMG', name: '高明', point: [112.892578, 22.900182]},
            {code: 'CNGOM', name: '高明', point: [112.892578, 22.900182]},
            {code: 'CNJJW', name: '九江', point: [112.993517, 22.831182]},
            {code: 'CNJIU', name: '九江', point: [112.993517, 22.831182]},
            {code: 'CNQZW', name: '钦州', point: [108.654147, 21.979934]},
            {code: 'CNQZH', name: '钦州', point: [108.654147, 21.979934]},
            {code: 'CNYFG', name: '云浮', point: [112.044491, 22.915094]},


            {code: 'AEDAS', name: '达斯岛', point: [52.8768212, 25.1546848]},
            {code: 'DOCAU', name: '考塞多', point: [-69.6308326, 18.425741]},
            {code: 'JMKIN', name: '金斯敦', point: [-76.8099041, 18.0178743]},
            {code: 'JPYOK', name: '横滨', point: [35.4437078, 139.6380256]},
            {code: 'ITGOA', name: '热那亚', point: [8.946256, 44.4056499]},
            {code: 'USLSA', name: '洛杉矶', point: [-118.2436849, 34.0522342]},
            {code: 'USBOS', name: '波士顿', point: [-71.0588801, 42.3600825]},
            {code: 'GBLON', name: '伦敦', point: [-0.1277583, 51.5073509]},
            {code: 'GBLIV', name: '利物浦', point: [-2.9915726, 53.4083714]},
            {code: 'DEDOR', name: '多特蒙德', point: [7.4652981, 51.5135872]},
            {code: 'ZAPEL', name: '伊丽莎白港', point: [25.5207358, -33.7139247]},
            {code: 'KRSEL', name: '首尔', point: [126.9779692, 37.566535]},
            {code: 'USNYK', name: '纽约', point: [-74.0059413, 40.7127837]},
            {code: 'ESMAD', name: '马德里', point: [-3.7037902, 40.4167754]},
            {code: 'IECOK', name: '科克', point: [-8.4863157, 51.8968917]},
            {code: 'JPOSK', name: '大阪', point: [135.5021651, 34.6937378]},
        ]
        let seriesEffectScatterData = []
        let seriesLinesData = []
        let series = []
        let groupArray = []
        let titleText = ''
        const color = ['#9ae5fc', '#dcbf71']

        // 港口排名数据查询
        const {queryGoodsWorldMapPortRankingData, dbData} = useQueryGoodsWorldMapData()

        const initLinesData = (groupArray) => {
            // 遍历组
            groupArray.forEach(group => {
                // 目标点
                let target = group.target;
                let style = group.style;
                let targetPoint = pointDictionary.find((item) => target === item.name);
                seriesEffectScatterData.push({
                    name: targetPoint.name,
                    value: targetPoint.point,
                    symbolSize: 15,
                    label: {show: true, fontSize: 26, color: '#ffa04d'},
                    tooltip: {
                        show: false
                    }
                });

                // 汇聚/发散起始点数组
                let points = group.points;
                let pointsValue = group.pointsValue;
                // 遍历汇聚起始点数组
                points.forEach((point, index) => {
                    let find = pointDictionary.find((item) => point.portCode === item.code);
                    if (find) {
                        seriesEffectScatterData.push({
                            name: point.portName,
                            value: find.point,
                            symbolSize: 10,
                            label: {color: '#FFFFFF'},
                            tooltip: {
                                show: true,
                                formatter: '{b}: ' + pointsValue[index] + '万吨',
                                textStyle: {
                                    fontSize: 16
                                }
                            }
                        });
                        seriesLinesData.push({
                            // style：to 代表发散， from 代表汇聚
                            coords: style === 'to' ? [targetPoint.point, find.point] : [find.point, targetPoint.point]
                            // 统一的样式设置
                            // lineStyle: {}
                        })
                    }
                });
            })
        }

        /**
         * 初始化散点和路径特效
         */
        const initSeries = () => {
            // 初始汇聚散路径 seriesData
            initLinesData(groupArray);

            series = getSeriesData(seriesLinesData, seriesEffectScatterData)
        }

        /**
         * 获取 Series
         */
        const getSeriesData = (seriesLinesData, seriesEffectScatterData) => {
            let series = [];
            series.push(
                {
                    // 白色航线特效图
                    type: 'lines',
                    zlevel: 1, // 用于分层，z-index的效果
                    effect: {
                        show: true, // 动效是否显示
                        period: 6, // 特效动画时间
                        trailLength: 0.7, // 特效尾迹的长度
                        color: '#fff', // 特效颜色
                        symbolSize: 4 // 飞机尾迹特效大小
                    },
                    lineStyle: {
                        normal: { // 正常情况下的线条样式
                            color: color[0],
                            width: 0.3, // 线条粗细，因为是叠加效果，要是有宽度，线条会变粗，白色航线特效不明显
                            curveness: -0.2 // 线条曲度
                        }
                    },
                    data: seriesLinesData // 特效的起始、终点位置
                },
                {
                    // 小飞机航线效果
                    type: 'lines',
                    zlevel: 2,
                    // symbol: ['none', 'arrow'],   // 用于设置箭头
                    // symbolSize: 100000, // 线条大小
                    effect: {
                        show: true,
                        period: 6,
                        trailLength: 0,
                        // symbol: planePath, // 特效形状，可以用其他svg pathdata路径代替
                        symbolSize: 5 // 箭头大小
                    },
                    lineStyle: {
                        normal: {
                            color: color[0],
                            width: 0.5,
                            opacity: 0.6,
                            curveness: -0.2
                        }
                    },
                    data: seriesLinesData // 特效的起始、终点位置，一个二维数组，相当于coords: convertData(item[1])
                },
                {
                    // 散点效果
                    type: 'effectScatter',
                    coordinateSystem: 'geo', // 表示使用的坐标系为地理坐标系
                    zlevel: 3,
                    rippleEffect: {
                        brushType: 'stroke' // 波纹绘制效果
                    },
                    label: {
                        normal: { // 默认的文本标签显示样式
                            show: true,
                            position: 'left', // 标签显示的位置
                            // position: getPosition(item[1]), // 标签显示的位置
                            // formatter: '{b}' // 标签内容格式器
                            formatter: '{b}',
                            fontSize: 16
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: color[0]
                        }
                    },
                    data: seriesEffectScatterData
                });
            return series;
        }

        /**
         * 获取 option
         */
        const getOption = (series) => {
            return {
                // 组件背景颜色和字体
                backgroundColor: 'rgba(11,32,53,0)',
                textStyle: {
                    fontSize: 16
                },
                // 组件的标题
                title: {
                    text: titleText,
                    //subtext: '国别资讯',
                    textStyle: {
                        color: '#fff',
                        fontSize: '26px'
                    },
                    top: '10px',
                    left: '10px'
                },
                // 组件地理坐标系底图
                geo: {
                    map: 'world', // 与引用进来的地图js名字一致
                    // center: [104.114129, 37.550339],//当前视角的中心点
                    zoom: 1, //当前视角的缩放比例
                    roam: true, //是否开启平游或缩放
                    scaleLimit: { //滚轮缩放的极限控制
                        min: 1,
                        max: 100
                    },
                    // 每个区域的样式
                    itemStyle: {
                        normal: {
                            areaColor: '#074a57'
                        },
                        emphasis: {
                            areaColor: '#019cba'
                        }
                    },
                    containLabel: true
                },
                // 组件的散点、线条
                series: series,
                tooltip: {
                    show: false
                }
            };
        }

        const initOption = () => {
            // 组装后台数据
            let worldMapData = dbData.value;
            // 世界地图
            // titleText = '南山港外贸出口货物流向'
            groupArray = [{
                target: '南山',
                points: worldMapData.map(item => {
                    return {portCode: item.portCode, portName: item.portNameCn}
                }),
                pointsValue: worldMapData.map(item => item.goodsThr.toFixed(2)),
                style: type === 'out' ? 'to' : 'from'
            }]

            // 初始化地图上的点和轨迹
            initSeries();

            // 设置配置项
            myChartInstance.setOption(getOption(series))
        }

        const closeWindow = () => {
            window.AC.HideWindow(6, {});
        }

        watch(dbData, initOption)

        onMounted(() => {
            myChartInstance = echartsUtil.initMyChart(myChart.value)
            // _this.$refs.myChart.style.height = _this.$refs.myChart.parentNode.getAttribute('data-height') + 'px'
            // _this.$refs.myChart.style.width = _this.$refs.myChart.parentNode.getAttribute('data-width') + 'px'
            // _this.myChart = _this.$echarts.init(_this.$refs.myChart);
        })

        return {
            myChart,
            bgImg,
            title,
            closeWindow
        }
    }
}
</script>

<style scoped>
div.content-container {
    height: 725px;
    width: 1152px;
}

.middle-container {
    height: 800px;
    width: calc(1200px - 48px);
    padding-left: 24px;
    padding-right: 24px;
}

.title-container {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 46px;
    width: 100%;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid #38E5ED;
}

.title {
    display: inline-flex;
    align-items: center;
}

.title-text {
    margin-left: 5px;
}

.button-container {
    display: inline-flex;
    width: 100%;
    align-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
}

.button-container > div {
    margin-right: 10px;
}

.thrChart {
    height: 600px;
}

.el-select {
    width: 100px;
}

.container {
    height: 1200px;
    width: 800px;
    position: relative;
}

.echarts-map {
    height: 100%;
    width: 100%;
}
</style>

<style>
.el-input__inner {
    background-color: #ffffff00;
    border: 1px solid #38e5de;
    color: #38e5de;
}

.el-select .el-input .el-select__caret,
.el-select:hover .el-input__inner,
.el-select .el-input__inner:focus,
.el-select .el-input.is-focus .el-input__inner,
.el-input.is-disabled .el-input__inner,
#nav > div > div.content-container > div > div:nth-child(2) > div > div.is-disabled > input,
#nav > div > div.content-container > div > div:nth-child(3) > div > div.is-disabled > input{
    color: #38e5de;
    border-color: #38e5de;
}

.el-input.is-disabled .el-input__inner,
#nav > div > div.content-container > div > div:nth-child(2) > div > div.is-disabled > span > span > i,
#nav > div > div.content-container > div > div:nth-child(3) > div > div.is-disabled > span > span > i{
    background-color: #38e5de00;
    opacity: 0.5;
    cursor: not-allowed;
}
</style>